.conversion-progress-container {
  margin-bottom: 16px;
  
  .conversion-progress-card {
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    
    .ant-card-head {
      background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
      border-bottom: 1px solid #e6f7ff;
      
      .ant-card-head-title {
        color: #1890ff;
        font-weight: 600;
      }
    }
    
    .ant-card-body {
      padding: 16px;
    }
  }
  
  .progress-item {
    margin-bottom: 16px;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .progress-header {
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      
      .file-name {
        color: #262626;
        font-size: 14px;
        max-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    
    .progress-content {
      .ant-progress {
        margin-bottom: 4px;
        
        .ant-progress-bg {
          transition: all 0.3s ease;
        }
      }
      
      .progress-stage {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .stage-text {
          font-size: 12px;
          color: #666;
        }
        
        .progress-percent {
          font-size: 12px;
          color: #1890ff;
          font-weight: 500;
        }
      }
    }
  }
}

// 动画效果
@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
  }
}

.conversion-progress-container {
  .progress-item {
    .progress-header {
      .anticon-loading {
        animation: pulse 1.5s ease-in-out infinite;
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .conversion-progress-container {
    .progress-item {
      .progress-header {
        .file-name {
          max-width: 150px;
        }
      }
    }
  }
}

// 状态颜色主题
.conversion-progress-container {
  .progress-item {
    &.status-uploading {
      .ant-progress-bg {
        background: linear-gradient(to right, #1890ff, #40a9ff);
      }
    }
    
    &.status-converting {
      .ant-progress-bg {
        background: linear-gradient(to right, #722ed1, #9254de);
      }
    }
    
    &.status-pdf_completed {
      .ant-progress-bg {
        background: linear-gradient(to right, #52c41a, #73d13d);
      }
    }
    
    &.status-completed {
      .ant-progress-bg {
        background: linear-gradient(to right, #52c41a, #95de64);
      }
    }
    
    &.status-error {
      .ant-progress-bg {
        background: linear-gradient(to right, #ff4d4f, #ff7875);
      }
    }
  }
}